<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>SMT综合信息看板</title>
		<link rel="stylesheet" type="text/css" href="../../css/workshopScreen.css"/>
		<style type="text/css">
			.content_1{
				width: 100%;
				height: 32.5%;
				margin-top: 8px;
			}
			.content_2{
				width: 100%;
				height: 32.5%;
				margin-top: -14px;
			}
			.content_3{
				width: 100%;
				height: 32.5%;
				margin-top: -15px;
			}
			.contentArea{
				float: left;
				width: 32.5%;
				margin-left: 9px;
				border: solid 1px rgb(18, 150, 219);
				border-radius: 10px;
				height: 90%;
			}

			.contentArea2{
				float: left;
				width: 65.5%;
				margin-left: 9px;
				border: solid 1px rgb(18, 150, 219);
				border-radius: 10px;
				height: 90%;
			}

			.contentArea table{
				color: white;
				text-align: center;
				vertical-align: middle;
				margin: 5px auto 10px;
				width: 100%;
				height: 80%;
				border-collapse: collapse;
			}


			.contentArea table th{
				height: 40px;
				color: white;
				background: rgba(0, 80, 115, 0.9);
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5005073,endColorstr=#E5005073);
				border: 1px solid rgb(16, 89, 129);
				background-clip: padding-box;
			}

			.contentArea table td{
				height: 40px;
				border: 1px solid rgb(16, 89, 129);
			}

			.con_title{
				display: inline-block;
				padding: 2px 20px;
				background: rgb(18, 150, 219);
				letter-spacing: 5px;
				color: white;
				font-size: 18px;
				font-weight: bold;
				margin: 5px 0px;
				border-radius: 3px;
				behavior: url(pie.htc);
			}
			.warningInfo td{
				color: #CE0000;
			}

			.con_div{
				width: 25%;
				float: left;
				margin-left: 6%;
				text-align: center;
			}

			.con_text{
				color: white;
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<!-- 标题 -->
			<div class="top">
				<div class="title clear">
					<img src="../../img/screen/bgd_title.png"/>
					<p>SMT综合信息看板</p>
				</div>
				<div class="currentTime">
					<span>2018年6月23日</span>&emsp;<span>星期四</span>&emsp;<span>09:54:32</span>
				</div>
			</div>
			<!-- 数据 -->
			<div class="content_1">
				<div class="contentArea">
					<span class="con_title">计划列表 </span>
					<table>
						<thead>
							<tr>
								<th>序号</th>
								<th>计划号</th>
								<th>产品/零部件代号</th>
								<th>计划数量</th>
								<th>计划完工时间</th>
								<th>齐套</th>
							</tr>
						</thead>
						<tbody>
							<tr style="color: #CE0000">
								<td>1</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
								<td>34</td>
								<td>2020.1.13</td>
								<td>未齐套</td>
							</tr>
							<tr style="color: #CE0000">
								<td>2</td>
								<td>JH2020</td>
								<td>804A/1564B</td>

								<td>34</td>
								<td>2020.1.13</td>
								<td><label>未齐套</label></td>
							</tr>
							<tr>
								<td>3</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
				
								<td>34</td>
								<td>2020.1.13</td>
								<td><label>齐套</label></td>
							</tr>
							<tr>
								<td>4</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
	
								<td>34</td>
								<td>2020.1.13</td>
								<td><label>齐套</label></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="contentArea">
					<span class="con_title">当前计划 </span>
					<table>
						<thead>
							<tr>
								<th>序号</th>
								<th>计划号</th>
								<th>产品/零部件代号</th>
								<th width="20%">&nbsp;&nbsp;&nbsp;计划/完工数量</th>
								<th>进度</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
								<td>100/80</td>
								<td><div class="progressDiv">
									<span class="progressChange pc02">80%</span>
								</div></td>
							</tr>
							<tr>
								<td>2</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
								<td>100/80</td>
								<td><div class="progressDiv">
									<span class="progressChange pc02">80%</span>
								</div></td>
							</tr>
							<tr>
								<td>3</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
								<td>100/80</td>
								<td><div class="progressDiv">
									<span class="progressChange pc02">80%</span>
								</div></td>
							</tr>
							<tr>
								<td>4</td>
								<td>JH2020</td>
								<td>804A/1564B</td>
								<td>100/80</td>
								<td><div class="progressDiv">
									<span class="progressChange pc02">80%</span>
								</div></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="contentArea">
					<span class="con_title">当班人员 </span>
					<table>
						<tbody>
							<tr>
								<th>姓名</th>
								<th>班组</th>
								<th>职务</th>
							</tr>
						</tbody>
						<tbody>
							<tr>
								<td>王迪</td>
								<td>焊接班组</td>
								<td>班组长</td>
							</tr>
							<tr>
								<td>王麻子</td>
								<td>焊接班组</td>
								<td>操作工</td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>					
					</table>
				</div>
			</div>
			<!-- 列表 -->
			<div class="content_2">
				<div class="contentArea">
					<!-- 信息列表区 -->
					<span class="con_title">品类月产量统计 </span>
					<div  >
						<!-- echarts 统计图表 -->
						<div class="chart" id="graph1" style="width: 100%;height: 203px;z-index: 0;"></div>
					</div>
				</div>
				<div class="contentArea">
					<span class="con_title">前五大缺陷 </span>
					<div  >
						<!-- echarts 统计图表 -->
						<div class="chart" id="graph2" style="width: 100%;height: 203px;z-index: 0;"></div>
					</div>
				</div>
				<div class="contentArea">
					<span class="con_title">当日报警 </span>
					<table class="warningInfo">
						<tbody>
							<tr>
								<th>警报内容</th>
								<th>报警等级</th>
								<th>报警时间</th>
							</tr>
						</tbody>
						<tbody>
							<tr>
								<td>JH01未按时完工</td>
								<td>一级</td>
								<td>2020.1.20 8:00</td>
							</tr>
							<tr>
								<td>JH02未按时完工</td>
								<td>一级</td>
								<td>2020.1.20 8:00</td>
							</tr>
							<tr>
								<td>JH03未按时完工</td>
								<td>一级</td>
								<td>2020.1.20 8:00</td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>					
					</table>
				</div>
			</div>
			<div class="content_3">
				<div class="contentArea">
					<!-- 信息列表区 -->
					<span class="con_title">产能增速 </span>
					<div  >
						<!-- echarts 统计图表 -->
						<div class="chart" id="graph3" style="width: 100%;height: 165px;z-index: 0;"></div>
						<div class="con_div">
							<span class="con_text">日产量(实际/计划)</span>
							<span class="con_text">100/80</span>
						</div>
						<div class="con_div">
							<span class="con_text">周产量(实际/计划)</span>
							<span class="con_text">800/820</span>
						</div>
						<div class="con_div">
							<span class="con_text">月产量(实际/计划)</span>
							<span class="con_text">25000/26000</span>
						</div>
					</div>
				</div>
				<div class="contentArea2">
					<!-- 信息列表区 -->
					<span class="con_title">质量指标 </span>
					<div  >
						<!-- echarts 统计图表 -->
						<div class="chart" id="graph4" style="width: 49%;height: 203px;z-index: 0;float: left;"></div>
					</div>
					<!-- 信息列表区 -->
					<div  >
						<!-- echarts 统计图表 -->
						<div class="chart" id="graph5" style="width: 49%;height: 203px;z-index: 0;float: left;"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/frame/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var w = document.documentElement.clientWidth;
		var h = document.documentElement.clientHeight;
		$(".wrap").css("width", w);
		$(".wrap").css("height", w*9/16);
		
		//获取绝对路径
		function getRealPath(){
			var localObj = window.location;
			var contextPath = localObj.pathname.split("/")[1];
			var basePath = localObj.protocol + "//" + localObj.host + "/" + contextPath;
			return basePath;                                                       
		}
  		
		
		
		
		
		//显示品类月产量统计图表
		function showGraph1(){
			var myChart = echarts.init(document.getElementById('graph1'));
			option = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				color: ['#CD5C5C', '#FFFF00','#00CED1', '#9ACD32', '#FFC0CB','#C0C0C0'],
				stillShowZeroSum: false,
				series: [
					{
						name: '产量',
						type: 'pie',
						radius: '70%',
						center: ['50%', '45%'],
						data: [
							{value: 100, name: '产品（702XD/700）'},
							{value: 300, name: '产品（804A/200）'},
							{value: 700, name: '产品（22A/100）'},
							{value: 450, name: '产品（30B/50）'},
							{value: 240, name: '产品（40A/55）'},
							{value: 420, name: '产品（37C/20）'},
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(128, 128, 128, 0.5)'
							}
						}
					}
				]
			};

			myChart.setOption(option);	
		}

		//显示前五大缺陷统计图表
		function showGraph2(){
			var myChart = echarts.init(document.getElementById('graph2'));
			option = {
				backgroundColor: 'black',
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(255,255,255,0.8)',
					extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
					textStyle: {
						color: '#6a717b',
					},

				},
				grid: {
					top: '0.5%',
					left: '3%',
					right: '9%',
					bottom: '2.5%',
					containLabel: true
				},
				yAxis: [{
					type: 'category',
					data: ['虚焊', '错焊', '位移', '缺陷四', '缺陷五'],
					inverse: true,
					axisTick: {
						alignWithLabel: true,


					},
					axisLabel: {
						margin: 10,
						textStyle: {
							fontSize: 18,
							color: 'white'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#2548ac'
						}
					},

				}],
				xAxis: [{
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#192469'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#17367c'
						}
					}
				}],
				series: [{
					name: '缺陷次数',
					type: 'bar',
					barWidth: 26,
					data: [23, 19, 15, 9, 3],
					label: {
						normal: {
							show: true,
							position: 'right',
							textStyle: {
								color: 'white', //color of value
								fontSize: 18,
							}
						}
					},
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#0590eb' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#08e3f1' // 100% 处的颜色
							}], false),
							barBorderRadius: [0, 15, 15, 0],
							shadowColor: 'rgba(0,0,0,0.1)',
							shadowBlur: 3,
							shadowOffsetY: 3
						}
					}
				}]
			};

			myChart.setOption(option);	
		}

		//显示产能增速统计图表
		function showGraph3(){
			var myChart = echarts.init(document.getElementById('graph3'));
			option = {
				grid: {//绘图网格
					left: '8%',
					right: '10%',
					top: '10%',
					bottom: '0%',
					containLabel: true
				},
				xAxis: {
					name: '日期',
					type: 'category',
					boundaryGap: false,
					data: ['2020-1-1', '2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7'],
					axisLabel: {
						show: true,
						interval:0,  
  						rotate:10, 
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white"
					}
				},
				yAxis: {
					name: '产量',
					type: 'value',
					axisLabel: {
						show: true,
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white",
						padding: [0, 0, -20, -90]
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				series: [{
					data: [95, 120, 120, 100, 140, 140, 50],
					type: 'line',
					radius: '70%',
					center: ['50%', '45%'],
					areaStyle: {}
				}]
			};

			myChart.setOption(option);	
		}

		//显示质量指标合格率统计图表
		function showGraph4(){
			var myChart = echarts.init(document.getElementById('graph4'));
			option = {
				title: {
			        text: '合格率',
					x:'center',
					y:'top',
					textStyle: {
					color: "white"
            		}
			    },
				grid: {//绘图网格
					left: '8%',
					right: '10%',
					top: '15%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					name: "日期",
					type: 'category',
					boundaryGap: false,
					data: ['2019-1', '2019-2', '2019-3', '2019-4', '02019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12'],
					axisLabel: {
						show: true,
						interval:0,  
  						rotate:40, 
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white"
					}
				},
				yAxis: {
					name:"合格率(%)",
					type: 'value',
					min: 60,
					axisLabel: {
						show: true,
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white",
						padding: [0, 0, 0, 0]
					}
				},
				series: [{
					data: [85, 89, 92, 95, 95, 93, 98, 95, 96, 99, 91, 89],
					type: 'line'
				}]
			};
			myChart.setOption(option);	
		}

		//显示质量指标直通率统计图表
		function showGraph5(){
			var myChart = echarts.init(document.getElementById('graph5'));
			option = {
				title: {
			        text: '直通率',
					x:'center',
					y:'top',
					textStyle: {
					color: "white"
            		}
			    },
				grid: {//绘图网格
					left: '8%',
					right: '10%',
					top: '15%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					name: "日期",
					type: 'category',
					boundaryGap: false,
					data: ['2019-1', '2019-2', '2019-3', '2019-4', '02019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12'],
					axisLabel: {
						show: true,
						interval:0,  
  						rotate:40, 
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white"
					}
				},
				yAxis: {
					name:"直通率(%)",
					type: 'value',
					min: 60,
					axisLabel: {
						show: true,
						textStyle: {
							color: 'white',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white",
						padding: [0, 0, 0, 0]
					}
				},
				series: [{
					data: [62, 65, 80, 63, 90, 75, 70, 65, 80, 74, 74, 88],
					type: 'line'
				}]
			};

			myChart.setOption(option);	
		}
		showGraph1();
		showGraph2();
		showGraph3();
		showGraph4();
		showGraph5();
	</script>
</html>
